<div class="wrapper">
  <app-breadcrumb [path]="path"></app-breadcrumb>
  <app-scrollview class="scrollview">
    <div *ngIf="broadcast;then showBroadcast;else loadBroadcast"></div>
    <ng-template #showBroadcast>
      <div id="BroadcastEdit">
        <form class="ui form">
          <div class="ui grid">
            <div class="ten wide column">
              <div class="two fields">
                <div class="field">
                  <label>{{'broadcast_title' | translate}}</label>
                  <input class="ui input" type="text" name="title" [(ngModel)]="broadcast.title" [disabled]="loading">
                </div>
                <div class="field">
                  <label>{{'broadcast_archived' | translate}}</label>
                  <div class="ui checkbox">
                    <input type="checkbox" id="archived" name="archived" [(ngModel)]="broadcast.archived" [disabled]="loading">
                    <label for="archived">{{'broadcast_archived_help' | translate}}</label>
                  </div>
                </div>
              </div>
              <div class="two fields">
                <div class="field">
                  <label>{{ 'broadcast_level' | translate }}</label>
                  <sui-select class="selection" *ngIf="broadcastLevelsList" name="level" [(ngModel)]="broadcast.level"
                    [options]="levels" [isSearchable]="true">
                    <sui-select-option *ngFor="let l of broadcastLevelsList" [value]="l.value">
                    </sui-select-option>
                  </sui-select>
                </div>
              </div>
              <div class="two fields">
                <div class="field">
                  <label>{{ 'common_project' | translate }}</label>
                  <sui-select class="selection mt5" placeholder="{{'broadcast_project_select' | translate}}" name="project"
                    labelField="name" valueField="key" [options]="projects" [isSearchable]="true" [(ngModel)]="broadcast.project_key"
                    #selectProj>
                    <sui-select-option *ngFor="let option of selectProj.filteredOptions" [value]="option"></sui-select-option>
                  </sui-select>
                </div>
              </div>
              <div class="field">
                <label>{{'broadcast_content' | translate}}</label>
                <textarea name="content" [(ngModel)]="broadcast.content" rows="{{getContentHeight()}}"></textarea>
              </div>
              <div *ngIf="canEdit" class="field">
                <app-delete-button *ngIf="broadcast.id" class="left floated" (event)="clickDeleteButton()" [loading]="deleteLoading"></app-delete-button>
                <button class="ui green right floated button" [class.loading]="loading" (click)="clickSaveButton()">
                  <i class="save icon"></i>{{ 'btn_save' | translate }}
                </button>
              </div>
              <div class="field">
                <label>{{'common_preview' | translate}}</label>
                <div class="ui segment">
                  <ng-container *ngIf="broadcast.content">
                    <markdown [data]="broadcast.content"></markdown>
                  </ng-container>
                </div>
              </div>
            </div>
            <div class="six wide column">
              <div class="ui segment">
                <h2 class="ui header"><i class="fa fa-book"></i> {{ 'settings_tips' | translate }}</h2>
                <p>{{'broadcast_help_line_1' | translate}}</p>
                <p>{{'broadcast_help_line_2' | translate}}</p>
              </div>
              <div class="field" *ngIf="broadcast.created !== ''">
                <h3>{{'broadcast_created' | translate}}</h3>
                {{broadcast.created}}
              </div>
              <div class="field" *ngIf="broadcast.updated !== ''">
                <h3>{{'broadcast_updated' | translate}}</h3>
                {{broadcast.updated}}
              </div>
            </div>
          </div>
        </form>
      </div>
    </ng-template>
    <ng-template #loadBroadcast>
      <div class="ui text active loader">{{ 'common_loading' | translate }}</div>
    </ng-template>
  </app-scrollview>
</div>